<template>
  <el-form :model="form">
    <el-form-item label :label-width="formLabelWidth">
      <el-upload
        ref="upload"
        name="image"
        :class="multiple?'':'done'"
        :action="serverUrl+'?token='+token+'&code='+code"
        accept="image/png, image/gif, image/jpg, image/jpeg"
        :data="data"
        list-type="picture-card"
        :multiple="isMultiple"
        :limit="limitNum"
        :auto-upload="false"
        :on-change="onFileListChange"
        :on-exceed="handleExceed"
        :before-upload="handleBeforeUpload"
        :on-progress="onProgress"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="onSuccess"
        :on-error="onError"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-progress :percentage="totalper"></el-progress>
      <div style="width:100%;text-align:center;margin-top:15px;">
        <el-button v-if="totalper<100" size="small" :disabled="totalper>0&&NotCancel" @click="onCancel">取消</el-button>
        <el-button
          v-if="totalper<100"
          size="small"
          type="primary"
          :disabled="NotUpload"
          @click="onUploadFile"
        >立即上传</el-button>
        <el-button
          v-if="totalper==100"
          size="small"
          type="primary"
          style="width:200px;"
          @click="onClose"
        >确定</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import store from '@/store';
export default {
  props: {
    action: {
      type: String,
      default: "UploadTemp"
    },
    data: {
      type: Object
    },
    isMultiple:{
      type:Boolean,
      default:true
    },
    limitNum:{
      type:Number,
      default:11
    }
  },
  data() {
    return {
      serverUrl: process.env.BASE_API +'/Upload/'+ this.$props.action,
      token:store.getters.token,
      code:store.getters.code,
      dialogImageUrl: "",
      dialogVisible: false,
      formLabelWidth: "80px",
      form: {},
      d:{},
      multiple: true,
      NotCancel: false, //不能退出
      NotUpload: true, //不能上传
      dcUploadNum: 0, //当前上传个数
      partUpload: 0, //部分上传量
      totalper: 0, //总上传进度
      ok: false //可以返回了
    };
  },
  methods: {
    // 上传文件之前的钩子
    handleBeforeUpload(file) {
      this.totalper = 0;
      this.dcUploadNum = 0;
      this.partUpload = 0;
    },
    //上传时
    onProgress(event, file, fileList) {
      if (event.percent == 100) {
        this.dcUploadNum += 100 * 0.6;
        this.partUpload = 0;
      } else {
        this.partUpload = event.percent;
      }
      this.totalper = parseInt(
        (this.dcUploadNum + this.partUpload) / fileList.length
      );
      this.NotUpload = true;
      this.NotCancel = true;
    },
    //文件列表发生变化时:添加、上传成功失败。这里取添加时
    onFileListChange(file, fileList) {
      let size = file.size / 1024 / 1024 / 2;
      if (size > 2) {
        this.$notify.warning({
          title: "不能上传",
          message: "图片【" + file.name + "】的大小超过了2M"
        });
        //从列表中移出
        let at = fileList.indexOf(file);
        fileList.splice(at, 1);
      }

      // console.log(fileList.length, file.percentage);
      if (file.percentage == 100) {
        this.dcUploadNum += 100 * 0.4;
        this.totalper = parseInt(this.dcUploadNum / fileList.length);
      } else {
        this.NotUpload = false;
        this.NotCancel = false;
      }
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      // this.$message("文件超出个数限制时的钩子");
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // this.$message("文件列表移除文件时的钩子");
      // console.log(fileList.length)
      if (fileList.length == 0) {
        this.NotUpload = true;
        this.NotCancel = false;
      }
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      // this.$message("点击文件列表中已上传的文件时的钩子");
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onUploadFile() {
      this.multiple = false;
      this.$refs.upload.submit();
    },
    onSuccess(response, file, fileList) {
      // console.log(file);
      if (response.code == 0) {
        this.d=response.data;
        if (this.dcUploadNum == fileList.length * 100 * 0.6) {
          this.totalper = 100 * 0.6;
        }
      } else {
        file.status="fail";
        this.$message.error("图片【"+file.name+"】上传失败！原因：" + response.msg);
      }
    },
    onClose() {
      if (this.totalper == 100) {
        // setTimeout(() => {
        this.totalper = 0;
        this.multiple = true;
        this.$emit("success",this.d); //上传成功
        this.$refs["upload"].clearFiles(); //清空上传过的所有列表
        // }, 100);
      }
    },
    onError(err, file, fileList) {},
    onCancel() {
      this.multiple = true;
      this.$emit("cancel"); //取消上传
    }
  }
};
</script>

<style scoped>
  .done >>> .el-upload--picture-card {
    display: none;
  }
</style>